<template>
  <div class="section">
    <div class="goods">
      <div class="left">
        <ul>
          <li 
            v-for="(item, index) in goods" :key="index"
            @click="active(index)"
            :class="{active: currentIndex == index}"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
      <div class="right">
        <!-- 初次因为 goods是空的会报错，使用 && 判断 修改报错（如果goods[currentIndex]不为空，再读取goods[currentIndex].goodlist）-->
        <div
          class="content"
          v-for="(item, index) in  goods[currentIndex] && goods[currentIndex].goodlist"
          :key="index"
        >
          <div class="imgBox">
            <img :src="item.picture" alt="" />
          </div>
          <div class="text">
            <h2>{{ item.name }}</h2>
            <p>{{ item.unit }}</p>
            <div class="sales">
              <span>{{ item.month_saled_content }}</span>
              <span>{{ item.promotion_info }}</span>
            </div>
            <div class="pirce">
              <span>{{ item.min_price }}</span>
              <span>+</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shop_detail } from '@/utlis/api'
import evenBus from '@/EvenBus/'
import { Dialog } from 'vant';
export default {
  data() {
    return {
      currentIndex:0,
      goods: [],
      info:{}

    };
  },
  watch:{
    info:{
      handler(newval,oldval){
        evenBus.$emit('title',newval)
      },
      // immediate:true,
      deep:true
    }
  },
  mounted(){
    shop_detail(this.$route.query).then((res)=>{
        console.log(res.data.shopinfo);
        if(res.data.shopinfo){
          this.goods = res.data.shopinfo.taglist,
          this.info = res.data.shopinfo.info
        }else {
            Dialog.alert({
              title: '提示',
              message: '该店铺已倒闭',
              theme: 'round-button',
            }).then(() => {
              this.$router.go(-1)
            });
        }
        
    })
  },
  methods:{
    active(index){
        this.currentIndex = index
    }
  },
  filters: {
    ellipsis(vla) {
      if (vla.length > 10) {
        return vla.substr(0, 10) + "...";
      } else {
        return vla;
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.section {
  .goods {
    display: flex;
    margin: 0 15px;
    .left {
    //   background: pink;
      width: 80px;
      ul {
        width: 100%;
        overflow: hidden;
        li {
          width: 100%;
        //   background: red;
          span {
            // background: green;
            font-size: 14px;
            display: block;
            margin: 30px auto;
            width: 50px;
            padding: 5px 0;
          }
        }
      }
    }
    .right {
      flex: 1;
      margin-top: 20px;
      .content {
        display: flex;
        margin-bottom: 15px;
        width: 100%;
        .imgBox {
          margin-right: 10px;
          img {
            width: 110px;
            height: 110px;
          }
        }
        .text {
          width: 100%;
          position: relative;
          h2 {
            font-size: 14px;
            font-weight: 600;
          }
          p {
            margin: 5px 0;
          }
          p,
          .sales {
            font-size: 12px;
            color: #666;
          }
          .sales span {
            margin-right: 10px;
          }
          .pirce {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            span {
              font-size: 18px;
              color: red;
              &:last-child {
                display: block;
                color: #fff;
                font-size: 20px;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                background-color: lightskyblue;
                border-radius: 10px;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }
}
.active {
    border-left: 3px solid red;
}
</style>